<template>
  <div class="app-container">

    <div
        style="width: 100vw;display: flex;justify-content: center;margin-top: 20px;padding: 20px;border-radius: 20px;margin-top: 20px">
      <!--    <div style="background-color: #409eff;width: 100%;display: flex;"></div>-->


      <div style="width: 60vw;position: relative;">
        <el-card v-if="toursimdata.photo">

          <div style="display: flex;">
            <div style="width: 24vw">
              <div style="width:100%;height: 400px">
                <el-image
                    style="width: 25vw;height: 40vh"
                    :src="url"

                >
                </el-image>
              </div>


              <div style="width: 100%;display: flex">
                <div v-for="(item,index) in toursimdata.photo.split(',')" :key="item" class="card-item">
                  <el-image
                      style="width: 4vw; height: 4vw;margin-right: 1vw;margin-top: 20px"
                      :src="item"
                      @mouseenter.native="handleMouseEnter(item)"
                  >
                  </el-image>
                </div>
              </div>
            </div>
            <div
                style="margin-left: 20px;font-size: 20px;position: relative;width: 36vw;background-color: #f3f3f3;padding: 30px;line-height: 60px">
              <div style="text-align: left; font-weight: bolder;">
                <span>{{ toursimdata.name }}</span>
              </div>

              <div style="text-align: left; margin-top: 10px;font-size: 20px;">
                起点：<span>{{ toursimdata.start }}</span>
              </div>

              <div style="text-align: left; margin-top: 10px;font-size: 20px;">
                终点：<span>{{ toursimdata.end }}</span>
              </div>

              <div style="text-align: left; margin-top: 10px;font-size: 20px;overflow-y: auto;height: 15vh">
                路线详情：<span>{{ toursimdata.content }}</span>
              </div>




            </div>


          </div>


        </el-card>

      </div>

      <!--      <div style="background-color: #409eff;width: 100%;display: flex;"></div>-->

      <!--      <div style="background-color: #409eff;height: 100vh;width: 100%;display: flex;"></div>-->
    </div>
    <!--    <div style="background-color: #409eff;width: 100%;display: flex;"></div>-->


  </div>
</template>

<script>
// import {getTourism} from "@/api/project/tourism";
import {getLine} from "@/api/project/line";

import PicZoom from 'vue-piczoom'


export default {
  components: {
    PicZoom
  },


  name: "index",
  data() {
    return {
      title: "",
      toursimId: "",
      url: "",
      toursimdata: {},
      open: false,
      form: {},
      userInfo: {}
    }
  },
  created() {
    this.toursimId = this.$route.query.id
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"))
    this.chushihua()
  },
  methods: {

    buyTicket() {
      if (!localStorage.getItem("userInfo")) {
        this.$message.error("请先登录");
        return
      }
      if (this.toursimdata.number > 0) {


        this.$router.push({path: '/tourism/buy', query: {info: JSON.stringify(this.toursimdata)}});

      } else {
        this.msgerror("库存不足！");
      }

    },

    handleMouseEnter(item) {
      this.url = item
    },
    addcart() {
      if (!localStorage.getItem("userInfo")) {
        this.$message.error("请先登录");
        return
      }

      if (this.toursimdata.goodsNum > 0) {
        ifhave({userId: this.userInfo.id, cartGoods: this.toursimId}).then(res1 => {
          if (res1.data.length > 0) {
            this.msgerror("该商品您已加入购物车！");
          } else {
            addCart({userId: this.userInfo.id, cartGoods: this.toursimId}).then(res => {
              this.msgsuccess("加入购物车成功！");
            })
          }
        })
      } else {
        this.msgerror("库存不足！");
      }


    },
    buy() {
      if (!localStorage.getItem("userInfo")) {
        this.$message.error("请先登录");
        return
      }
      if (this.toursimdata.goodsNum > 0) {



      } else {
        this.msgerror("库存不足！");
      }


    },

    chushihua() {
      getLine({id: this.toursimId}).then(res => {
        this.toursimdata = res.data
        this.url = res.data.photo.split(",")[0]

      })
    },

  }
}
</script>

<style scoped>
.app-container {
  background-image: url('../../assets/back.jpg');
  background-size: 100%; /* 确保背景图片覆盖整个容器 */
  /*height: 100%; !* 设置高度为视口高度的100% *!*/
  min-height: 100vh;
  display: flex;


}
</style>
